表單驗證小專案 — Email 檢查
功能需求
完整程式碼
存成 day18.html：
wqq
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>Day 18 表單驗證 Email</title>
<style>
body { font-family: Arial, "微軟正黑體"; padding: 20px; }
input { padding: 6px; margin: 5px; }
button { padding: 6px 12px; margin: 5px; }
.error { color: red; font-size: 14px; }
.success { color: green; font-size: 14px; }
</style>
</head>
<body>
<h1>Email 驗證示範</h1>
<form id="emailForm">
<label for="email">輸入 Email：</label>
<input type="text" id="email" placeholder="example@mail.com">
<button type="submit">送出</button>
<p id="msg"></p>
</form>
<script>
const form = document.getElementById("emailForm");
const emailInput = document.getElementById("email");
const msg = document.getElementById("msg");
form.addEventListener("submit", (e) => {
e.preventDefault(); // 阻止表單真的送出
const email = emailInput.value.trim();
// 基本的 Email 格式檢查（正則表達式）
const emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
if (email === "") {
msg.textContent = "❌ 請輸入 Email！";
msg.className = "error";
} else if (!emailPattern.test(email)) {
msg.textContent = "❌ Email 格式不正確！";
msg.className = "error";
} else {
msg.textContent = "✅ Email 格式正確，表單送出成功！";
msg.className = "success";
emailInput.value = ""; // 清空輸入框
}
});
</script>
</body>
</html>
程式重點說明
阻止表單預設行為
e.preventDefault();
避免表單真的刷新網頁。
檢查空值
if (email === "")
用正則表達式檢查格式
const emailPattern = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
emailPattern.test(email);
動態顯示訊息（錯誤紅色、成功綠色）
msg.textContent = "...";
msg.className = "error"; // 或 succ****
iThome鐵人賽
看影片追技術